<template>
	<div class="SpecialBookHome">
		<div class="checkbook">
			<el-input type="text" placeholder="请输入书本编号" v-model="select_id" style="width: 200px;margin-left: 50px;" />
			<el-input type="text" placeholder="请输入图书名称" v-model="select_name" style="width: 200px;margin-left: 50px;" />
			<el-input type="text" placeholder="请输入图书类型" v-model="select_type" style="width: 200px;margin-left: 50px;" />
			<el-button type="primary" @click="sel()" style="margin-left: 60px;">搜索</el-button>
			<!--分页工具条-->
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page.sync="currentPage4" :page-sizes="[5, 10,15,20]" :page-size="pageSize"
				layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
			</el-pagination>
			<el-table style="width: 96%" :data="bookList" @selection-change="handleSelectionChange"
				:cell-class-name="cellRowClassName" >
				<el-table-column label="图片" width="" align="center" header-align="center">
					<template v-slot="scope">
						<el-image style="width: 100px; height: 100px"
							:src="require('@/assets/img/'+scope.row.book_pic+'.jpg')" />
					</template>
				</el-table-column>
				<el-table-column prop="bid" label="编号" width="70" align="center" header-align="center">
				</el-table-column>
				<el-table-column label="书本名称" align="center" header-align="center">
					<template v-slot="scope">
						<a style="color:black;cursor:pointer;font-size: 16px;" @click="go(scope.$index,scope.row)">{{
					                  scope.row.book_name
					                }}</a>
					</template>
				</el-table-column>
				<el-table-column prop="book_type" label="书本类型" align="center" header-align="center">
				</el-table-column>
				<!-- <el-table-column prop="book_intro" label="书本简介" align="center" header-align="center">
				</el-table-column> -->
				<el-table-column prop="book_number" label="书本库存" width="80" align="center" header-align="center">
				</el-table-column>
				<el-table-column prop="book_sale" label="销售量" width="80" align="center" header-align="center">
				</el-table-column>
				<el-table-column prop="book_balance" label="原价" width="80" align="center" header-align="center">

				</el-table-column>
				<el-table-column prop="book_membalance" label="会员价" width="80" align="center" header-align="center">
				</el-table-column>
				<el-table-column prop="" label="操作" width="" v-slot="scope" header-align="center">
					<el-button type="primary" @click="addbookcar(scope.$index,scope.row)">购买</el-button>
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>

<script>
	import axios from 'axios'
	export default {
		data() {
			return {
				bookList: [],
				book_name: '',
				book_type: '',
				book_intro: '',
				book_number: '',
				book_balance: '',
				book_pic: '',
				book_membalance: '',
				bid: '',
				currentRowIndex: '',
				dataonLineListSelections: [],
				// 每页显示的条数
				pageSize: 5,
				// 总记录数
				totalCount: 100,
				// 当前页码
				currentPage: 1,
				select_name: '',
				select_id: '',
				select_type: '',
				selectbook: {
					bid: '',
					book_name: '',
					book_type: ''
				},
				book: {
					bid: '',
					book_name: '',
					book_type: '',
					book_intro: "",
					book_number: "",
					book_balance: "",
					book_membalance: "",
				},
			}
		},
		created() {
			this.findByPages();
			this.$nextTick(() => { //重新渲染分页
				this.pageshow = true;
			});
		},
		methods: {
			sel: function() {
				this.selectbook.bid = this.select_id;
				this.selectbook.book_name = this.select_name;
				this.selectbook.book_type = this.select_type;
				this.findByPages()
			},
			findByPages() {
				axios({
					method: "post",
					url: "http://localhost:8080/book/selectbypc?currentPage=" + this
						.currentPage + "&pageSize=" + this.pageSize,
					data: this.selectbook
				}).then(res => {
					//设置表格数据
					this.bookList = res.data.rows; // {rows:[],totalCount:100}
					//设置总记录数
					this.totalCount = res.data.totalCount;
				})
			},
			//分页
			handleSizeChange(val) {
				//console.log(`每页 ${val} 条`);
				// 重新设置每页显示的条数
				this.pageSize = val;
				this.findByPages();
			},
			handleCurrentChange(val) {
				//console.log(`当前页: ${val}`);
				// 重新设置当前页码
				this.currentPage = val;
				this.findByPages();
			},
			tableRowClassName({
				row,
				rowIndex
			}) {
				row.row_index = rowIndex;
			},
			onRowClick(row, event, column) {
				this.currentRowIndex = row.row_index;
				this.addbookcar(this.currentRowIndex);
			},
			addbookcar(index, row) {
				axios.post('http://localhost:8080/bookcar/addBookCar', 'bid=' + this.bookList[index].bid + '&book_name=' +
						this.bookList[index].book_name + '&book_balance=' + this.bookList[index].book_balance +
						'&book_pic=' +
						this.bookList[index].book_pic + '&book_membalance=' + this.bookList[index].book_membalance)
					.then(res => {
						alert(res.data)
					})
			},
			cellStyle({
				row,
				column,
				rowIndex,
				columnIndex
			}) {
				if (columnIndex == 2 || columnIndex == 3 || columnIndex == 4) {
					//第二三第四列的背景色就改变了2和3都是列数的下标
					if (columnIndex == 3 || columnIndex == 4) {
						//字体颜色
						return "background:#e6cc6f;color:blue;cursor: pointer";
					}
					return "background:#e6cc6f";
				}

			},
			cellRowClassName({
				column,
				columnIndex
			}) {
				if (columnIndex === 6) {
					return 'pricebook';
				}
				return '';
			},
			go(index,row) {
				let routeUrl = this.$router.resolve({
					path: "/detail",
					query: {
						book_bid: row.bid,
						book_name: row.book_name,
						book_intro: row.book_intro,
						book_membalance: row.book_membalance,
						book_balance: row.book_balance,
						book_type: row.book_type,
						book_pic: row.book_pic,
						book_num:row.book_number,
						book_sale:row.book_sale,
						book_look: row.book_look,
					}
				});
				window.open(routeUrl.href, '_blank');
			},
		}
	}
</script>

<style>
	.SpecialBookHome {
		width: 1010px;
		margin-top: 40px;
	}

	.demo-table-expand {
		font-size: 0;
	}

	.demo-table-expand label {
		width: 90px;
		color: #99a9bf;
	}

	.demo-table-expand .el-form-item {
		margin-right: 0;
		margin-bottom: 0;
		width: 50%;
	}

	.el-table .pricebook {
		color: red;
		text-decoration: line-through;
	}
</style>
